<!DOCTYPE html>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="placeholder.js"></script>

<body>
  <div style="height:10000px;"></div>
  <img id="small_dimension_img" src='../loading/resources/base-image1.png' style="height:1px; width:10px">
  <img id="large_dimension_img" src='../loading/resources/base-image2.png' style="height:20px; width:20px">
  <img id="height_only_img" src='../loading/resources/base-image3.png' style="height:1px;">
  <img id="width_only_img" src='../loading/resources/dup-image1.png' style="width:1px;">
  <img id="percent_dimension_img" src='../loading/resources/dup-image2.png' style="height:10%; width:10%">
</body>

<script>
  async_test(function(t) {
    window.addEventListener("load", t.step_func_done());
  }, "Test that document load event is fired");

  async_test(function(t) {
    var small_dimension_img = document.getElementById("small_dimension_img");
    small_dimension_img.addEventListener("load",
      t.step_func_done(function() {
        assert_true(is_image_fully_loaded(small_dimension_img));
      }));
  }, "Test that small <img> with width and height mentioned in inline dimensions is not deferred by lazyload ");

  async_test(function(t) {
    var large_dimension_img = document.getElementById("large_dimension_img");
    var height_only_img = document.getElementById("height_only_img");
    var width_only_img = document.getElementById("width_only_img");
    var percent_dimension_img = document.getElementById("percent_dimension_img");
    window.addEventListener("load", t.step_func_done(function() {
      assert_false(is_image_fully_loaded(large_dimension_img));
      assert_false(is_image_fully_loaded(height_only_img));
      assert_false(is_image_fully_loaded(width_only_img));
      assert_false(is_image_fully_loaded(percent_dimension_img));
    }));
    large_dimension_img.addEventListener("load",
      t.unreached_func("Load event should not be fired for below viewport image with large inline dimension"));
    height_only_img.addEventListener("load",
      t.unreached_func("Load event should not be fired for below viewport image with only inline height"));
    width_only_img.addEventListener("load",
      t.unreached_func("Load event should not be fired for below viewport image with only inline width"));
    percent_dimension_img.addEventListener("load",
      t.unreached_func("Load event should not be fired for below viewport image with percentage inline dimension"));
  }, "Test that <img> with non small height or width below the viewport is loaded as placeholder");
</script>
